<template>
    <div @click="linkto" class="Card">
        <div>
            <div class="picUrl">
        <img :src="novelitem.picUrl" alt="">
      </div>
      <h5 class="exceed">{{novelitem.brief}}</h5>
        </div>
      <p>
        <!-- <van-icon name="eye" size="16" color="#b550ff"/> -->
        <span>{{novelitem.view}}</span>
      </p>
    </div>
</template>

<script>
    export default {
      props:{ 
            novelitem:{
                type:Object,
           
                default:()=>{ 
                        return {
                    picUrl:"https://bookcover.yuewen.com/qdbimg/349573/1034539330/90",
                    brief:"The Road to the Riches",
                    name:"斗破苍穹",
                    author:"天蚕土豆",
                    view:"24",
                    id:"13",
                    lv:4.5,
                    evaluate:"Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, she came back to life in a different body and a different world. In a world that is far from modern, slavery and murder are very commonplace. Reviving in a different body did not make her happy, she was faced with two choices between life and death again, became one of the entertainer slaves at a hunting event held once a month by the superior sons of the kingdom, including the crown prince."
                }
                }
            }
        },

          methods: {
            linkto(){
                if( this.$props.novelitem.sort  ){
              
                    this.$router.push({ name:'reader' , params:{  id:this.$props.novelitem.id  , sort:this.$props.novelitem.sort  }  })

                }else{
                    this.$router.push({ name:'novel' , query:{  id:this.$props.novelitem.id  , sort:1 }  })
                }
            }
        }
        
    }
</script>

<style lang="scss" scoped>
.Card{
    display: flex;
    flex-direction: column;
        justify-content: space-between;
    font-size: 0.4rem;
    width:2.66rem;
    .picUrl{
        width: 100%;
        height: 120px;
        box-shadow: 0px 8px 12px  rgba(0,0,0,0.3);
       img{
        width:  100%;
        height:  100%;
        border-radius: 3px;
       }
    }
        h5{
            margin: 5px 0;
        }
}
.exceed{
    overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

</style>